<template>
	<view>
		<view class=" paddings">
			
			<view v-for="(item,index) in list" :key="index" class=" " style="color: #fff; margin-bottom: 20rpx;position: relative;">
				<view :style="{background:'linear-gradient('+item.bg+')'}" style="border-radius: 20rpx 20rpx 0 0;padding: 40rpx 30rpx;">
					<view class="u-flex u-row-between">
						<view style="font-size: 30rpx;font-weight: bold;">{{item.cardName}}</view>
						
					</view>
					<view class="u-flex u-row-between u-margin-top-20">
						<view style="font-size: 32rpx;font-weight: bold;">￥{{item.price}}</view>
						<view>每日限时{{item.freeTime}}分钟</view>
					</view>
				</view>
				<view class="buy"  :style="{color:item.color}"  @click="buy(item)" style="padding: 20rpx; border-radius: 0 0 20rpx 20rpx; text-align: center;background: #F1F1F1;">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		props:{
			list:{
				type:Array,
				default:()=>[]
			}
		},
		methods:{
			buy(item){
				this.$emit('buy',item)
			}
		}
	}
</script>

<style>
	
	.buy::after {
		content: ' ';
		position: absolute;
		left: -40rpx;
		width: 60rpx;
		height: 60rpx;
		background: #fff;
		border-radius: 100%;
		bottom: 50rpx;
		overflow: hidden;
		
	}
	.buy::before {
		content: ' ';
		position: absolute;
		right: -40rpx;
		width: 60rpx;
		height: 60rpx;
		background: #fff;
		border-radius: 100%;
		bottom: 50rpx;
		overflow: hidden;
		
	}
</style>
